<!DOCTYPE html>
<html>
  <head>
    <title>s10.html</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   
	<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
	<script type="text/javascript">
		function f1(){
			$('#form1 input:disabled').css('border','1px dotted red');
		}
		function f2(){
			$('#form1 input:enabled').attr('disabled','true');
		}
		function f3(){
			var length=$('#form2 input:checked').length;
			alert(length);
			alert($('#form2 input:checked').val());
		}
		function f4(){
			alert($('#form3 select option:selected').val());
			alert($('option:selected').val());
		}
		
	</script>
  </head>
  
  <body>
  	<!-- 表单对象属性过滤选择器 -->
  	<!-- :enabled
  		 :disable
  		 :checked
  		 :selected
  	 -->
  	 <a href="javascript:;" onclick="f4();">表单对象属性过滤选择器</a><br>
  	 <form id="form1">
  	 	username:<input name="username" /><br>
  	 	name:<input name="name" disabled="disabled"/><br>
  	 </form>
  	 <form id="form2">
  	 	兴趣：吃饭<input name="interest" type="checkbox" value="eating" checked="checked"  />
  	 	喝茶<input name="interest" type="checkbox" value="drinking" />
  	 	看报纸<input name="interest" type="checkbox" value="reading" />
  	 	
  	 </form>
  	 <form id="form3">
  	 	<select>
  	 		<option value="math">数学</option>
  	 		<option value="english" selected="selected">英语</option>
  	 		<option value="computer">计算机</option>
  	 	</select>
  	 </form>
  </body>
</html>
